<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>区域车牌维护</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
	<style type="text/css">  
	.layui-table-page {  
	position:fixed;  
	}  
	</style>
</head>
<body>
<form class="layui-form">
	<div class="layui-row">
		<div class="span12">
			<table>
				<tr>
					<td>
						区域:
					</td>
					<td>
						<select id="areaId" name="areaId">
							<c:forEach items="${areaDicDataArr}" var="areaDicData">
					        	<option value="${areaDicData.dicDataValue}">${areaDicData.dicDataName}</option>
					        </c:forEach>
						</select>
					</td>
					<td>
						车牌:
					</td>
					<td>
						<input type="text" id="carno" class="layui-input" />
					</td>
					<td >
						<button type="button" id="addBtn" class="layui-btn layui-btn-normal">增加</button>
					</td>
				</tr>
			</table>
		</div>
	</div>
</form>
	<div class="span12">
		<table id="financeTable" lay-filter="financeTable"></table>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.all.js"></script>
<script>
var ctx = "${pageContext.request.contextPath}";
var areaDicDatas = eval('${areaDicDatas}');
function getDicVal(value,list){
	for(var i=0;i<list.length;i++){
		if(list[i].dicDataValue==value){
			return list[i].dicDataName;
		}
	}
	return "";
}
var layer = layui.layer;
var form = layui.form;
var laytable = layui.table;
$(function(){
	var tableIns = laytable.render({
	    elem: '#financeTable'
	    ,url: ctx+'/dataAnalyze/findCarAreaByMapAndPage' //数据接口
	    ,height:350
	    ,where: {
	    }//参数
	    ,page: true //开启分页
	    ,cols: [[ //表头//已经使用使用灰色条纹
	      {field: 'areaId', title: '区域',templet: function(d){
	    	  return getDicVal(d.areaId,areaDicDatas);
	      }  }
	      ,{field: 'carno', title: '车牌',templet: function(d){
	          return d.carno;
	      } }
	      ,{field: '', title: '操作',templet: function(d){
	          return "<button type='button' class='layui-btn layui-btn-sm layui-btn-normal' onClick='deleteCarArea("+d.carAreaId+")'>删除</button>";
	      } }
	    ]]
	  });
	
	$("#addBtn").on("click",function(){
		$.ajax({
			  type: 'POST',
			  url: ctx+"/dataAnalyze/checkCarNoAndArea",
			  data: {
				  areaId:$("#areaId").val(),
				  carno:$("#carno").val()
			  },
			  success: function(data,status){
				   if(data){
					   if(data.state==1 && data.count<1){
						   $.ajax({
								  type: 'POST',
								  url: ctx+"/dataAnalyze/saveCarArea",
								  data: {
									  areaId:$("#areaId").val(),
									  carno:$("#carno").val()
								  },
								  success: function(data,status){
									   if(data){
										   if(data.state==1){
											   layer.msg("添加成功!");
											   tableIns.reload();
										   }else{
											   layer.msg(data.msg);
										   }
									   }
								  }
								});
					   }else{
						   layer.msg("该车牌已经存在了!");
					   }
				   }
			  }
			});
	});
});
function deleteCarArea(carAreaId){
	$.ajax({
		  type: 'POST',
		  url: ctx+"/dataAnalyze/deleteCarArea",
		  data: {
			  carAreaId:carAreaId
		  },
		  success: function(data,status){
			   if(data){
				   if(data.state==1){
					   laytable.reload('financeTable',{} );
				   }else{
					   layer.msg("系统异常!");
				   }
			   }
		  }
		});
}

</script>
</html>